<template>
  <div>
    <draggable
      class="list-group"
      :list="list1"
      :group="{ name: 'people', pull: 'clone', put: false }"
      :clone="cloneDog"
      :disabled="false"
      :sort="false"
      @change="log"
      item-key="id"
    >
      <template #item="{ element }">
        <div class="list-group-item">
          {{ element.componentName }}
        </div>
      </template>
    </draggable>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import draggable from "vuedraggable";
const list1 = ref([
  { componentName: "button" },
  { componentName: "text" },
  { componentName: "dog 3" },
  { componentName: "dog 4" },
]);
const log = (evt: any) => {
  console.log(evt);
};
const cloneDog = (data: any) => {
  console.log(data);

  return {
    componentName: data.componentName,
  };
};
</script>
<style scoped lang="scss">
.list-group {
  display: flex;
  flex-wrap: wrap;
  .list-group-item {
    width: 50%;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    cursor: pointer;
  }
}
</style>
